<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>响应式布局——流体</title>
	<link rel="stylesheet" type="text/css" href="http://coding.imweb.io/demo/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style-fluid.css">
</head>
<body>
	<div class="page page--aside-right">
		<header class="header">
			<div class="center-inner">
				<h1>header区域</h1>
                <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</p>
            </div>
		</header>

		<div class="container">		
			<div class="center-inner">
				<main class="main">
					<div class="content">
						<h2>内容区域</h2>
						<article class="article">
							<p>学恶乎始？恶乎终？曰：其数则始乎诵经，终乎读礼；其义则始乎为士，终乎为圣人， 真积力久则入，学至乎没而后止也。故学数有终，若其义则不可须臾舍也。为之，人也；舍 之，禽兽也。故书者，政事之纪也；诗者，中声之所止也；礼者，法之大分，类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也，乐之中和也，诗书之博也，春秋之微 也，在天地之间者毕矣。君子之学也，入乎耳，着乎心，布乎四体，形乎动静。端而言，蝡而动，一可以为法则。小人之学也，入乎耳，出乎口；口耳之间，则四寸耳，曷足以美七尺之躯哉！古之学者为己，今之学者为人。君子之学也，以美其身；小人之学也，以为禽犊。故不问而告谓之傲，问一而告二谓之囋。傲、非也，囋、非也；君子如响矣。</p>
							<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</p>
						</article>
					</div>
				</main><!--main-->

				<aside class="aside aside--right">
					<section class="aside-block">
						<h2>右边栏区域 1</h2>
						<ul>
							<li>君子博学而日参省乎己，则知明而行无过矣。</li>
							<li>神莫大于化道，福莫长于无祸</li>
							<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
						</ul>
					</section>
					<section class="aside-block">
						<h2>右边栏区域 2</h2>
						<ul>
							<li>君子博学而日参省乎己，则知明而行无过矣。</li>
							<li>神莫大于化道，福莫长于无祸</li>
							<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
						</ul>
					</section>
				</aside><!--aside_right-->	
			</div>
		</div><!--container-->
	
		<footer class="footer">
			<div class="center-inner">
				<h2>footer区域</h2>
				<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得。</p>
			</div>
		</footer>
	</div>
</body>
</html>